<template>
  <div class="content_box">
    <div class="nr_box">
      <div class="head_box">
        <swiper 
          class="swiper" 
          interval="3000" 
          duration="1000" 
          next-margin="50rpx"
          previous-margin="50rpx"
          @change="swiperChange"
        >
          <swiper-item v-for="(item,index) in msg.vipLevelList" :key="index">
            <div class="box">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                widthFix
                lazy-load
                :src="item.src"
              />
              <div class="nr">
                <p class="name">{{item.vipName}}</p>
                <div class="line_box">
                  <p class="text" v-if="item.baiNum != 100">{{msg.integral}}/{{item.needIntegral}} 单笔消费¥{{item.needIntegral}}直接升级</p>
                  <p class="text" v-else>{{msg.integral}}/{{item.needIntegral}} 已满足条件</p>
                  <div :class="index == 0?'line':index == 1?'line on1':index == 2?'line on2':'line on3'">
                    <p :style="{width:item.baiNum+'%'}"></p>
                  </div>
                </div>
              </div>
            </div>
          </swiper-item>
          <!-- <swiper-item>
            <div class="box">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                widthFix
                lazy-load
                src=""
              />
              <div class="nr">
                <p class="name">黄金会员</p>
                <div class="line_box">
                  <p class="text">100/500 单笔消费¥500直接升级</p>
                  <div class="line on1">
                    <p></p>
                  </div>
                </div>
              </div>
            </div>
          </swiper-item>
          <swiper-item>
            <div class="box">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                widthFix
                lazy-load
                src=""
              />
              <div class="nr">
                <p class="name">白金会员</p>
                <div class="line_box">
                  <p class="text">100/500 单笔消费¥500直接升级</p>
                  <div class="line on2">
                    <p></p>
                  </div>
                </div>
              </div>
            </div>
          </swiper-item>
          <swiper-item>
            <div class="box">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                widthFix
                lazy-load
                src=""
              />
              <div class="nr">
                <p class="name">钻石会员</p>
                <div class="line_box">
                  <p class="text">100/500 单笔消费¥500直接升级</p>
                  <div class="line on3">
                    <p></p>
                  </div>
                </div>
              </div>
            </div>
          </swiper-item> -->
        </swiper>
      </div>
      <div class="list_box">
        <div class="list" v-if="discount">
          <img src="/static/images/vip_icon1.png" alt="">
          <div>
            <p class="name">会员{{discount}}折优惠</p>
            <p class="text">按会员等级，下单享受不同的折扣</p>
          </div>
        </div>
        <div class="list" v-if="discount">
          <img src="/static/images/vip_icon2.png" alt="">
          <div>
            <p class="name">积分兑换</p>
            <p class="text">积分兑换卡券/优惠券</p>
          </div>
        </div>
        <div class="list" v-if="discount">
          <img src="/static/images/vip_icon3.png" alt="">
          <div>
            <p class="name">双倍积分</p>
            <p class="text">微信支付下单/充值获取双倍积分</p>
          </div>
        </div>
        <div class="list">
          <img src="/static/images/vip_icon5.png" alt="">
          <div>
            <p class="name">专属客服</p>
            <p class="text">24小时在线解决</p>
          </div>
        </div>
        <div class="list" v-if="discount">
          <img src="/static/images/vip_icon6.png" alt="">
          <div>
            <p class="name">生日礼品</p>
            <p class="text">送小礼品/优惠券等</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { 
  getToken,
} from "@/utils/auth";
import { getUserVipLevel } from "@/api/index";
export default {
  data() {
    return {
      msg:{},
      discount:0
    };
  },
  methods: {

    swiperChange(e){
      console.log(e)
      let index = e.mp.detail.current
      this.discount = this.msg.vipLevelList[index].discount
      console.log(this.discount)
    },

    // 获取vip信息
    getVip(){
      getUserVipLevel().then(res=>{
        if (res.statusCode == '00000') {
          res.data.vipLevelList.map(item=>{
            if(res.data.integral >= item.needIntegral){
              item.baiNum = 100
            }else{
              item.baiNum = res.data.integral / item.needIntegral * 100
            }
          })




          res.data.vipLevelList[0].src = 'https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230719/HN4c4uk5s2YuwaGwmpT8.png'
          res.data.vipLevelList[0].baiNum = 100
          res.data.vipLevelList[1].src = 'https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230719/mxllX3DJSMNYvQ4khBST.png'
          res.data.vipLevelList[2].src = 'https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230719/pcYKDd6wiMPQtSKfTKfm.png'
          res.data.vipLevelList[3].src = 'https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230719/a5w3YdPjSOlIGascTVsX.png'
          this.msg = res.data
          console.log(this.msg)
        }
      })
    },
  },
  onShow(){
    this.getVip()
  },
  onLoad(options) {
    
  },
};
</script>

<style lang="scss" scoped>
.content_box {
  min-height: 100vh;
  background: #F5F5F5;
  .nr_box{
    background: #fff;
  }
  .head_box{
    .swiper{
      height: 260rpx;
      .box{
        width: 96%;
        height: 100%;
        border-radius: 16rpx;
        overflow: hidden;
        margin:0 auto;
        position: relative;
        .nr{
          position: absolute;
          width: 100%;
          height: 100%;
          top:0;
          display: flex;
          flex-direction:column;
          justify-content: space-between;
          .name{
            margin:48rpx 32rpx;
            font-size: 36rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #111111;
          }
          .line_box{
            margin:0 32rpx 48rpx 32rpx;
            .text{
              font-size: 24rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #111111;
            }
            .line{
              width: 354rpx;
              height: 8rpx;
              background: #fff;
              border-radius: 50rpx;
              margin-top:14rpx;
              position: relative;
              &.on1{
                p{
                  background: #DDBC7C;
                }
              }
              &.on2{
                p{
                  background: #B4B8DB;
                }
              }
              &.on3{
                p{
                  background: #6781C1;
                }
              }
              p{
                position: absolute;
                top:0;
                left: 0;
                height: 8rpx;
                background: #7CBD77;
                border-radius: 50rpx;
              }
            }
          }
        }
      }
    }
  }
  .list_box{
    margin-top:20rpx;
    .list{
      margin-left:64rpx;
      display: flex;
      align-items: center;
      height: 134rpx;
      border-bottom:1px solid #F2F1F4;
      &:last-child{
        border-bottom:none;
      }
      img{
        width: 48rpx;
        height: 48rpx;
        margin-right:42rpx;
      }
      .name{
        font-size: 30rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #111111;
      }
      .text{
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #999999;
        margin-top:10rpx;
      }
    }
  }
}

</style>